<template>
    <div id="detail">
            <div  class="statushead" >
                <div class="back" @click="hide">
                    <i class="icon-arrow_lift"></i>
                </div>
                <span  class="name">订单详情</span>
                <div  class="statustext"> <button v-if="order.orderStatus <= 1 && showCancel" @click="cancelOrder(order.orderId)">{{cancelOrderName}}</button></div>
            </div>
            <div  class="restaurant-card" >
                <div  class="head listitem">
                    <div  class="name-wrap">
                        <div><span>桌号：</span><span>{{order.numTable}}</span></div>
                    </div>
                     <div  class="name-wrap">
                        <div><span>人数：</span><span>{{order.numPeople}}</span></div>
                    </div>
                     <div  class="name-wrap">
                        <div><span >下单时间：</span><span>{{order.createTime | time}}</span></div>
                    </div>
                </div>
                <div class="user-list" v-for="user in userInfoList" :key="user.openid">
                    <div class="user-content" v-show="userInfoSize > 1">
                        <div class="user-item">
                            <img  class="img-head" :src="user.headimgurl" />
                            <label>{{user.name}}</label>
                        </div>
                        <div class="time">19:00 </div>
                    </div>
                    <div  class="product-list">
                        <ul  class="cart-item" v-for="(orderDetail,index) in orderDetailList.filter(item => userInfoSize ? item.openid == user.openid : true )" :key="index" >
                            <li  class="product-item">
                                <div class="profile">
                                    <p class="name">{{orderDetail.productName}}</p>
                                </div>
                                <div class="price-wrap">
                                    <span  class="quantity">x{{orderDetail.productQuantity}}</span>
                                    <span class="price">&yen;{{orderDetail.productPrice * orderDetail.productQuantity}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--合计-->
               <div  class="listitem">
                    <div  class="food-total">
                        <div><span>合计：</span><span>{{orderDetailCount}} 项</span></div>
                    </div>
                    <div  class="statustext"> {{order.orderStatus | orderStatusName}}</div>
                </div>
            </div>
            <div  class="consume-other">
                <div  class="title listitem">
                    <span>其它</span>
                </div>
                <ul  class="cardlist">
                    <li class="" v-if="order.hereOrOuter === 0"><span >茶位费：</span><span>&yen; {{order.numPeople * 2}}</span></li>
                    <li class="" v-if="order.needRice"><span >米饭费：</span><span>&yen; {{order.numPeople * 2}}</span></li>
                    <li class="" v-if="order.packAmount>0"><span >打包费：</span><span>&yen; {{order.packAmount}}</span></li>
                </ul>
            </div>
            <div  class="detailcard" >
                <!---->
                <div  class="detailcard-order card">
                    <div  class="title listitem">
                        <span>账单信息</span>
                    </div>
                    <ul  class="cardlist">
                        <li  class="listitem amount"><strong>消费金额</strong><span >&yen; {{order.consumAmount}}</span> </li>
                        <li  class="listitem amount"><strong>优惠金额</strong><span class="colorGreen">&yen; {{order.offerAmount}}</span></li>
                        <li  class="listitem amount-order"><strong>应付金额</strong><span class="colorRed">&yen; {{order.orderAmount}}</span></li>
                    </ul>
                </div>
            </div>
            <div class="footer" v-if="showPay">
                <div class="box-food" v-if="showAddFood" @click="gofoods">继续点餐</div>
                <!-- <div class="box-cancel" v-if="order.orderStatus == 0" @click="cancelOrder(order.orderId)">{{cancelOrderName}}</div> -->
                <div class="box-order" v-if="order.orderStatus <= 1 && order.payStatus == 0" @click="pay(order.orderId)">支付
                </div>
            </div>
    </div>
</template>

<script>
import { getCookie } from 'common/js/util';
let config = require('../../../config');
    config = process.env.NODE_ENV === 'development' ? config.dev : config.build;
    const ERR_OK = 0;
    export default {
        data() {
           return {
               order: {},
               orderDetailList: [],
               userInfoList: [],
               cancelOrderName: '取消订单'
           };
        },
        created() {
            this.fetchData();
        },
        watch: {
            '$route': 'fetchData'
        },
        computed: {
            userInfoSize() {
                return this.userInfoList ? this.userInfoList.length : 0;
            },
            showCancel() {
                return this.diffCreateTime(this.order.createTime) < 5; // 距离下单时间少于5分钟，可以取消订单
            },
            showAddFood() {
                return this.diffCreateTime(this.order.createTime) < 45; // 距离下单时间少于45分钟，
            },
            showPay() {
                return this.diffCreateTime(this.order.createTime) < 240; // 距离下单时间少于2小时，
            },
            orderDetailCount() {
                var sum = 0;
                for (var i = 0; i < this.orderDetailList.length; i++) {
                    sum += parseInt(this.orderDetailList[i].productQuantity);
                }
                return sum;
            }
        },
        filters: {
            payName: function (value) {
                if (value === 0) {
                    return '货到付款';
                } else {
                    return '微信支付';
                }
            },
            time: function (value) {
                // var date = new Date(value * 1000);
                // return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
                var date = new Date(value);
                return date.getHours() + ':' + date.getMinutes();
            },
            /**
             * 待接单: orderStatus = 0
             * 订单已完结: orderStatus = 1
             * 订单已取消: orderStatus = 2
             * @param value
             */
            orderStatusName: function (value) {
                if (value === 0) {
                    return '新下单';
                } else if (value === 1) {
                    return '追加订单';
                } else if (value === 8) {
                    return '订单已完结';
                } else if (value === 9) {
                    return '订单已取消';
                } else {
                    return '';
                }
            }
        },
        methods: {
            fetchData() {
                console.log(this.$route.params.orderId);
                if (!this.$route.params.orderId) {
                    console.log('参数获取失败');
                    return;
                }
                this.$axios.get('/buyer/order/detail', {
                    params: {
                        orderId: this.$route.params.orderId
                    }
                }).then((response) => {
                    response = response.data;
                    console.log(response);
                    if (response.code === ERR_OK) {
                        this.order = response.data;
                        this.orderDetailList = this.order.orderDetailList;
                        this.userInfoList = this.order.wechatUserList;
                        console.log(this.order);
                    } else {
                        alert(response.msg);
                    }
                }).catch(() => alert('订单加载失败'));
            },
            cancelOrder: function (orderId) {
                this.cancelOrderName = '取消中...';
                this.$axios.post('/buyer/order/cancel', {
                    orderId: orderId,
                    openid: getCookie('openid')
                }).then(function (response) {
                    response = response.body;
                    if (response.code === 0) {
                        this.cancelOrderName = '';
                        location.reload();
                    } else {
                        alert('取消订单失败:' + response.msg);
                    }
                });
            },
            pay: function (orderId) {
                location.href = config.wechatPayUrl +
                    '?openid=' + getCookie('openid') +
                    '&orderId=' + orderId +
                    '&resultUrl=' + encodeURIComponent(config.sellUrl + '/#/order/' + orderId);
            },
            hide() {
                this.$router.back();
            },
            test() {
                console.log(this);
            },
            gofoods() {
				window.location.href = '#/goods';
			},
            diffCreateTime(createTime) {
                console.log('diffCreateTime...........');
                const minute = 1000 * 60;
                const now = new Date().getTime();
                const diffValue = now - createTime;
                const minC = diffValue / minute;
                return minC;
            }
        }
    };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  html, body {
    height: 100%;
  }
  #detail
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .statushead
      position: fixed;
      top: 0;
      width: 100%;
      height: 30px;
      z-index: 9;
      padding-top: 16px;
      text-align: center;
      background-color: #fff;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
      .back
        position: absolute
        top: 6px
        left: 0
        .icon-arrow_lift
          display: block
          padding: 6px
          font-size: 20px
          color: #666
      .statustext
        position: absolute
        top: 12px
        right: 10px
        font-size: 14px
        color: red
    .restaurant-card
      position: relative;
      margin-top: 50px;
      margin-bottom: 5px;
      background-color: #fff;
      .listitem
        padding: 13px 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(7,17,27,0.1);
      .name-wrap
        img
          width: 20px;
          height: 20px;
        span
          font-size: 12px;
          color #999;
      .user-list
        .user-content
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2px 2px;
          margin: 0 6px;
          border-bottom: 1px solid rgba(7,17,27,0.1);
          .user-item
            display: flex;
            align-items: center;
            img
              width: 30px;
              height: 30px;
              border-radius:50px;
              padding-right: 4px;
          .time
            font-size: 14px;
        .product-list .cart-item 
          padding: 13px 10px;
          border-bottom: 1px solid rgba(7,17,27,0.1);
          .product-item
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 95%;
            font-size: 14px;
          .price-wrap
            display: flex;
            width: 20%;
            margin-right:5px;
            .quantity
              color #666;
            .price
              padding-left: 50px;
              color: red;
      .food-total span
        font-weight:bold;
      .statustext
        font-size: 14px;
        color: green;
    .consume-other
      margin-bottom: 5px;
      .title
        color: #333;
        span
          width: 100%;
          font-weight: 700;
          text-align: center;
      .listitem
        padding: 12px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        background-color: #fff;
      .cardlist li
          padding: 8px 10px;
          display: flex;
          align-items:flex-start;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid rgba(7,17,27,0.1);
          background-color: #fff;
          font-size: 13px;
    .detailcard
      margin-bottom: 5px;
      padding-bottom: 80px;
      .title
        color: #333;
        span
          width: 100%;
          font-weight: 700;
          text-align: center;
      .listitem
        padding: 12px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        background-color: #fff;
      .amount 
        strong
          font-size: 14px;
        .colorGreen
          color: green;
      .amount-order 
        strong
          font-size: 16px;
          font-weight: 700;
        .colorRed
          color: red;
    .footer
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      display: flex;
      background-color: #696969;
      .box-food 
        flex-grow: 1
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
	  .box-order
        flex-grow: 2
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #D54D2B;
        color: #fff;	
</style>
